<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>
		
		<u-notice-bar mode="horizontal" type="primary" :list="listBar"></u-notice-bar>

		<view class="cu-card dynamic " v-show="show">

			<view class="cu-item "  style="box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05); width: 85%; margin: auto;margin-top: 50rpx;">
				<view class="cu-list menu-avatar">
					<view class="cu-item " v-for="(item, index) in form" :key="index">

						<!-- 猫咪头像 -->
						<view class="cu-avatar round lg">
							<image class="cat-head" :src="item.catImg" mode="aspectFill">
							</image>
						</view>


						<view class="content flex-sub">

							<view class="text-bold u-font-md" style="white-space: pre-wrap;">
								{{' ' + item.catName}}
							</view>

							<view class="cu-tag bg-green light round my-text" v-show="item.catCheck == '已通过'">
								{{item.catCheck}}
							</view>

							<view class="cu-tag bg-orange light round my-text" v-show="item.catCheck == '审核中'">
								{{item.catCheck}}
							</view>

							<view class="cu-tag bg-red light round my-text" v-show="item.catCheck == '需修改'">
								{{item.catCheck}}
							</view>


						</view>


						<view v-show="item.catCheck == '需修改'">
							<button class="cu-btn bg-orange" style="margin-right: 30rpx;"
								@click="myUpdate()">修改</button>
						</view>

						<view>
							<button class="cu-btn bg-blue" style="margin-right: 30rpx;"
								@click="myPreview(item.id)">预览</button>
						</view>

					</view>
				</view>
			</view>

			<u-toast ref="uToast" />
		</view>





	</view>
</template>

<script>
	import imgData from "@/common/uiImg.js";
	export default {
		data() {
			return {
				pageName: '我的上传',
				listBar: [
					'猫猫小程序交流群：133808502'
				],
				loadStatus: 'loadmore',
				flowList: [],
				list: null,

				form: {},

				show: false,


			}
		},
		onLoad(option) {
			// console.log("option.openid",option.openid)
			this.getUserCat(option.openid)
		},

		methods: {
			//获取 用户上传的信息 
			getUserCat(id) {
				console.log("option.openid :", id)

				//发送请求
				// this.request('getUserCat',{openid: id}, 'GET').then(res => {

				this.$u.api.getUserCat({
					openid: id
				}).then(res => {
					let catMsg = {}
					let flag = 0 // 判断是否有猫咪图鉴的 标志  【如果没有就弹窗】

					try {
						// 如果成功，并且有值
						if (res.code == 200) {
							console.log("获取 成功")


							//对信息进行处理
							for (var i = 0; i < res.data.length; i++) {

								catMsg[i] = {};

								catMsg[i]['id'] = res.data[i].id; // 编号    【后面的跳转  根据这个进行     ❤❤】
								catMsg[i]['catName'] = res.data[i].catName; // 姓名
								catMsg[i]['catImg'] = this.myimgurl() + res.data[i].catImg; // 头像
								catMsg[i]['catCheck'] = res.data[i].catCheck; // 审核状态
								flag = 1

							}
							this.form = catMsg
							this.show = true

						} else {
							console.log("获取 用户上传的信息 失败 或 用户还没有上传信息")
						}

						//最后判断是否有数据【没有就弹窗---未查到您上传的图鉴】
						if (flag == 0) {
							this.$refs.uToast.show({
								title: '未查到您上传的图鉴',
								type: 'error',
								url: ''
							})
						}

					} catch (e) {
						//TODO handle the exception
						console.log("e:", e)
						this.$refs.uToast.show({
							title: '未查到您上传的图鉴',
							type: 'error',
							url: ''
						})
					}
				})

			},

			// 修改 图鉴
			myUpdate() {
				this.$refs.uToast.show({
					title: '功能还未开放',
					type: 'warning',
					url: ''
				})
			},

			//预览 图鉴
			myPreview(id) {
				console.log('id:', id)
				uni.navigateTo({
					url: '/subPages/me/myPreview/myPreview?id=' + id
				});
			},

		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>

<style lang="scss" scoped>
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.center-box {
		color: #333333;
		width: 85%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 50rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.my-text {
		font-size: 20rpx;
	}

	.my-name {
		font-size: 30rpx;
	}
</style>
